<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IndexDB 前端数据库</title>
</head>
<body>
    <script>
        // index 索引
        var db;
        const request = window.indexedDB.open('blogs',1);
        // console.log(request);
        request.onerror=function(){
            console.log('数据库打开失败');
        }
        request.onsuccess=function(){
            db = request.result;
            create();
            // console.log('数据库打开成功');
            // var objectstore=db.createObjectStore('person',{keyPath: 'id'});
        }
        request.onupgradeneeded=function(){
            db = request.result;
            var objectstore;
            if(!db.objectStoreNames.contains('person')){
                // 主键 索引就是为了查询更快 doc （id）详情页 加一个索引
                // 列表页 .get() 20 .skip() limit()
                // 详情页 /detail?id=32322 
                objectstore=db.createObjectStore('person',{keyPath:'id'});
                // /search?name=%xiaolang%
                objectstore.createIndex('name','name',{unique:false});
                objectstore.createIndex('email','email',{unique:true});
            }
        }
        function create(){
            // 事务
            let request = db.transaction(['person'],'readwrite')
                .objectStore('person')
                .add({id:1,name:'guozong',email:'xt@tmall.com'});
            request.onerror=function(){
                console.log('写入失败');
            }
            request.onsuccess=function(){
                console.log('写入成功');
            }
        }
    </script>
</body>
</html>